<template>
    <div class="template-detail" v-if="template">
        <el-card class="detail-card">
            <!-- 基本信息 -->
            <div class="basic-info">
                <h2>{{ template.name }}</h2>
                <p class="description">{{ template.description }}</p>
                <div class="meta-info">
                    <el-tag>{{ template.category }}</el-tag>
                    <el-tag v-for="tag in template.tags" :key="tag" type="info">
                        {{ tag }}
                    </el-tag>
                </div>
            </div>

            <!-- 预览图片 -->
            <div class="preview-images">
                <el-carousel :interval="4000" type="card" height="400px">
                    <el-carousel-item v-for="image in template.previewImages" :key="image">
                        <img :src="image" :alt="template.name">
                    </el-carousel-item>
                </el-carousel>
            </div>

            <!-- 参数配置 -->
            <div class="params-config">
                <h3>参数配置</h3>
                <el-form :model="params" label-width="120px">
                    <el-form-item v-for="(value, key) in template.defaultParams" 
                                :key="key" 
                                :label="formatParamLabel(key)">
                        <el-input v-if="typeof value === 'string'" 
                                v-model="params[key]"
                                :rows="key.includes('prompt') ? 3 : 1"
                                :type="key.includes('prompt') ? 'textarea' : 'text'" />
                        <el-input-number v-else 
                                       v-model="params[key]"
                                       :min="getParamMin(key)"
                                       :max="getParamMax(key)"
                                       :step="getParamStep(key)" />
                    </el-form-item>
                </el-form>
            </div>

            <!-- 操作按钮 -->
            <div class="actions">
                <el-button type="primary" @click="handleGenerate">
                    生成图片
                </el-button>
                <el-button @click="handleSave">
                    保存配置
                </el-button>
            </div>

            <!-- 元数据信息 -->
            <div class="metadata">
                <el-descriptions :column="3" border>
                    <el-descriptions-item label="模型版本">
                        {{ template.metadata?.modelVersion }}
                    </el-descriptions-item>
                    <el-descriptions-item label="难度">
                        {{ template.metadata?.difficulty }}
                    </el-descriptions-item>
                    <el-descriptions-item label="预计用时">
                        {{ template.metadata?.estimatedTime }}秒
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import type { WorkflowTemplate } from '@/types/workflow-template';
import { getTemplate } from '@/api/template';

const route = useRoute();
const template = ref<WorkflowTemplate | null>(null);
const params = ref<Record<string, any>>({});

// 加载模板数据
async function loadTemplate() {
    try {
        const id = route.params.id as string;
        const data = await getTemplate(id);
        template.value = data;
        params.value = { ...data.defaultParams };
    } catch (error) {
        ElMessage.error('加载模板失败');
    }
}

// 格式化参数标签
function formatParamLabel(key: string): string {
    return key.split('_')
        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
        .join(' ');
}

// 获取参数配置
function getParamMin(key: string): number {
    const configs: Record<string, number> = {
        steps: 1,
        cfg_scale: 1,
        width: 64,
        height: 64,
    };
    return configs[key] || 0;
}

function getParamMax(key: string): number {
    const configs: Record<string, number> = {
        steps: 150,
        cfg_scale: 30,
        width: 2048,
        height: 2048,
    };
    return configs[key] || 100;
}

function getParamStep(key: string): number {
    const configs: Record<string, number> = {
        steps: 1,
        cfg_scale: 0.5,
        width: 64,
        height: 64,
    };
    return configs[key] || 1;
}

// 处理生成图片
async function handleGenerate() {
    ElMessage.info('生成图片功能开发中...');
}

// 处理保存配置
async function handleSave() {
    ElMessage.info('保存配置功能开发中...');
}

onMounted(() => {
    loadTemplate();
});
</script>

<style scoped>
.template-detail {
    padding: 20px;
}

.detail-card {
    max-width: 1200px;
    margin: 0 auto;
}

.basic-info {
    margin-bottom: 20px;
}

.description {
    color: #666;
    margin: 10px 0;
}

.meta-info {
    margin-top: 10px;
}

.meta-info .el-tag {
    margin-right: 8px;
}

.preview-images {
    margin: 20px 0;
}

.preview-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.params-config {
    margin: 20px 0;
}

.actions {
    margin: 20px 0;
    text-align: center;
}

.metadata {
    margin-top: 20px;
}
</style> 